<template>
  <div class="add-user">
    <el-form
      :inline="true"
      :rules="rules"
      ref="ruleForm"
      :model="dataForm"
      label-width="120px"
      class="dialog"
      :label-position="labelPosition"
    >
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="字典名称" prop="name">
            <el-input
              v-model="dataForm.name"
              placeholder="请输入字典名称"
              clearable
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="字典类型" prop="type">
            <el-input v-model="dataForm.type" placeholder="请输入类型"  clearable></el-input>
          </el-form-item>
        </el-col>
         </el-row>
        <el-row :gutter="20" style="position:relative">         
        <el-col :span="12">
          <el-form-item label="字典代码" prop="dicCode">
            <el-input v-model="dataForm.dicCode" placeholder="请输入字典代码"  clearable></el-input>
          </el-form-item>
                    <p
            style="color:#F56C6C;margin-left:130px;margin-bottom:20px;font-size:12px;position:absolute;left:0;top:45px;"
            v-if="validteGroupNo"
          >该字典代码已存在,请重新输入</p>
        </el-col>
        <el-col :span="12">
          <el-form-item label="字典值" prop="dicValue">
            <el-input
              v-model="dataForm.dicValue"
              placeholder="请输入字典值"
              clearable
              
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
     <el-row :gutter="20">      
        <el-col :span="12">
          <el-form-item label="顺序号" prop="orderDesc">
            <el-input v-model="dataForm.orderDesc" placeholder="请输入顺序号"  clearable></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      
      
        <!-- <el-col :span="12">
          <el-form-item label="公司名称" prop="companyCode">
           <el-select v-model="dataForm.companyCode" placeholder="请选择">
              <el-option
                v-for="item in companList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item> 
        </el-col> -->
    
     
      <!-- <el-row :gutter="20" class="url">
           <el-col :span="24">
          <el-form-item label="链接地址" style="width:100%" prop="url">
            <el-input v-model="dataForm.url" placeholder="请输入链接地址"  clearable></el-input>
          </el-form-item>
        </el-col>
    
      </el-row> -->
      <el-row :gutter="20">
        <el-col :span="23">
            <el-form-item prop="remark" label="备注">
          <el-input type="textarea" :rows="5" placeholder="请输入备注" clearable v-model="dataForm.remark"></el-input>
        </el-form-item>
        </el-col>
      </el-row>
      <el-form-item style="margin-top:20px;margin-bottom:100px;text-align:center;">
          <el-button type="primary"  @click="doneFinshed('ruleForm')" :disabled="isDabled">确认</el-button>
          <el-button type="info" @click="backPrev">取消</el-button>
      
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
export default {
  data () {
    var orderDesc = (rule, value, callback) => {
      console.log(value)
      var regex = /^\d{1,11}$/
      if (value == '') {
        callback(new Error('顺序号不允许为空'))
      } else
      if (!regex.test(value)) {
        callback(new Error('顺序号只能是数字并且长度不能大于 11'))
      } else {
        callback()
      }
    }
    var dicCodes = (rule, value, callback) => {
      var data = {
        dicCode: this.dataForm.dicCode
      }
      if (value == '') {
        callback(new Error('字典代码不允许为空'))
      } else if (value && !this.noRepeat) {
        this.$http.post(`/${this.$const.PREFIX.AUTHORITY}/dictionary/dataUniqueByDicCode`, data).then((res) => {
          if (res.result) {
            this.noRepeat = res.data
            if (this.noRepeat == false) { // res.data.data [true]有重复/【false】无重复
              callback(new Error('该字典代码已存在，请重新输入'))
            } else {
              callback()
            }
          } else {
            callback()
          }
        })
      } else {
        callback()
      }
    }
    return {
      validteGroupNo: false,
      userRole: [],
      options: [],
      value: '',
      disabled: false,
      radio: 1,
      noRepeat: false,
      dataForm: {
        'remark': '',
        'name': '',
        'dicCode': '',
        'dicValue': '',
        'orderDesc': '',
        'type': '',
        'url': '',
        'companyCode': ''

      },
      sysCode: ['sys_role'],
      companList: [],
      roledisabled: true,
      componydisabled: true,
      labelPosition: 'right',
      rules: {
        name: [
          { required: true, message: '字典名称不允许为空', trigger: 'blur' },
          { min: 1, max: 64, message: '长度不可超过64个字符', trigger: 'blur' }
        ],
        dicCode: [
           { validator: dicCodes, required: true, trigger: 'blur' },
          { max: 64, message: '长度不可超过64个字符', trigger: 'blur' }
        ],
        dicValue: [
          { required: true, message: '字典值不允许为空', trigger: 'blur' },
          { max: 64, message: '长度不可超过64个字符', trigger: 'blur' }
        ],
        orderDesc: [
            { validator: orderDesc, required: true, trigger: 'blur' }

        ],
        type: [
          { required: true, message: '字典类型不允许为空', trigger: 'blur' },
           { max: 64, message: '长度不可超过64个字符', trigger: 'blur' }
        ],
        companyCode: [
          { required: false, message: '公司不允许为空', trigger: 'blur' },
          { max: 64, message: '长度不可超过64个字符', trigger: 'blur' }
        ],
        url: [
          { max: 128, message: '长度不可超过128个字符', trigger: 'blur' }
        ],
        remark: [
          { max: 255, message: '长度不可超过255个字符', trigger: 'blur' }
        ]
      },
      isDabled: false
    }
  },
  mounted () {
    this.getCompanList()
    if (this.$route.query.code) {
      this.getEditInfo(this.$route.query.code)
    } else {
      this.$router.push('/systemSettings/dictionaries/dictionariesList')
    }
  },

  methods: {
    // backPrev () {
    //   this.$confirm('此操作将放弃当前修改, 是否继续?', '提示', {
    //     confirmButtonText: '确定',
    //     cancelButtonText: '取消',
    //     type: 'warning'
    //   })
    //     .then(() => {
    //       this.$router.go(-1)
    //     })
    //     .catch(() => {})
    // },
    backPrev () {
      this.$router.go(-1)
    },
         // 检测字典名称唯一性
    checkOnly (index) {
      console.log(66666)
      if (this.dataForm.dicCode == '') {
        return
      }
      var data = {}
      if (index == 1) {
        data = {
          dicCode: this.dataForm.dicCode,
          code: this.$route.query.code
        }
      }
      this.$http.post(`/${this.$const.PREFIX.AUTHORITY}/dictionary/dataUniqueByDicCode`, data)
        .then(res => {
          if (res.result) {
            if (res.data) {
              if (index == 1) {
                this.validteGroupNo = false
              } else {
                this.validateName = false
              }
            } else {
              if (index == 1) {
                this.validteGroupNo = true
              } else {
                this.validateName = true
              }
            }
          }
        })
    },
    getEditInfo (code) {
      this.$http.post(`/${this.$const.PREFIX.AUTHORITY}/dictionary/getDictionaryDetail`, {dictionaryCode: code}).then((res) => {
        if (res.result) {
          var data = res.data
          this.dataForm = {
            'remark': data.remark,
            'name': data.name,
            'dicCode': data.dicCode,
            'dicValue': data.dicValue,
            'orderDesc': data.orderDesc,
            'type': data.type,
            'url': data.url,
            'companyCode': data.companyCode

          }
          this.value = data.dicCode
        }
      })
    },
    getCompanList () {
      var data = {
        companyNo: '',
        name: ''
      }
      this.$http.post(`/${this.$const.PREFIX.AUTHORITY}/company/findCompanyList`, data).then((res) => {
        var result = res.data
        var delData = []
        if (res.result) {
          for (var k in result) {
            delData.push({value: result[k].code, label: result[k].name})
          }
          this.companList = delData
        }
      })
    },
    doneFinshed (formName) {
      var data = {
        operateType: 'edit',
        dictionary: {
          'remark': this.dataForm.remark,
          'name': this.dataForm.name,
          'dicCode': this.dataForm.dicCode,
          'dicValue': this.dataForm.dicValue,
          'orderDesc': this.dataForm.orderDesc,
          'type': this.dataForm.type,
          'url': this.dataForm.url,
          'companyCode': this.dataForm.companyCode,
          code: this.$route.query.code

        }

      }
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.isDabled = true
          this.$http.post(`/${this.$const.PREFIX.AUTHORITY}/dictionary/operationData`, data).then((res) => {
            if (res.result) {
              this.$message({
                message: '操作成功',
                type: 'success'
              })

              this.$router.push('/systemSettings/dictionaries/dictionariesList')
            } else {
              this.isDabled = false
              this.$message.error({
                message: res.msg,
                duration: 5000
              })
            }
          })
        } else {
          return false
        }
      })
    }
  }
}
</script>
<style>
.dialog .el-form-item__content {
  width: 70%;
}
.url .el-form-item__content {
  width: 80%;
}
.dialog .el-form-item {
  width: 100%;
}
.dialog .el-select {
  width: 100%;
}
.el-form-item__label {
  text-align: right;
}

</style>

<style lang="scss" scoped>
.add-user {
  background: #fff;
  padding-top: 20px;
  padding-left: 20px;
}
</style>

